<template>
	<view>
		<view class="all">
			<!-- 淘宝账号 -->
			<view class="" v-if="titile == '淘宝账号'">
				<view class="top-box">
					<image src="../../static/购.jpg" class="avatar"></image>
					<view class="nickname">优购</view>
				</view>
				<view class="custom-style">
					<u--input placeholder="5-25位中英文、数字、下划线或组合" v-model="value" @change="change" clearable></u--input>
				</view>
				<view class="text">
					暂时只支持 简体中文、英文小写，建议不要使用身份证、手机号等隐私信息
				</view>

				<view class="button">
					<u-button text="修改账号名" shape='circle' class="" @click="bnt"
						color="linear-gradient(to right, rgb(255, 147, 11), rgb(253, 83, 1))"></u-button>
				</view>
			</view>
			<!-- 手机号 -->
			<view class="settingphone" v-else-if="titile == '手机号'">
				<view class="phone">当前绑定手机号</view>
				<view class="text1">{{tel}}</view>
				<view class="button1123">
					<u-button text="修改手机号" shape='circle' class="" @click="bnt"
						color="linear-gradient(to right, rgb(255, 147, 11), rgb(253, 83, 1))"></u-button>
				</view>

				<view class="button1">
					<u-button @click="back" class="" shape='circle' :plain="true" text="返回" color="#fe6401"></u-button>
				</view>

				<uni-popup ref="inputDialog" type="dialog">
					<uni-popup-dialog ref="inputClose" mode="input" title="修改手机号" placeholder="请输入手机号"
						@confirm="dialogInputConfirm"></uni-popup-dialog>
				</uni-popup>
			</view>
			<!-- 修改密码 -->
			<view class="newpwdall" v-else>
				<view class="newpwd">
					<text>输入新密码</text>

					<u--input placeholder="请输入新密码" border="none" :password='true' v-model="paw1" clearable></u--input>
				</view>
				<view class="newpwd">
					<text>确认新密码</text>
					<u--input placeholder="确认新密码" border="none" :password='true' v-model="paw2" clearable></u--input>
				</view>
				<view class="newpwdtext">
					必须是6-20个英文字母、数字或符号(除空格)，且字母、数字和标点符号至少含两种
				</view>
				<view class="pwdbut">
					<u-button text="提交" color='#ff4401' @click="newpassword"></u-button>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from "vuex"
	export default {
		data() {
			return {
				value: '',
				Upper: false,
				titile: '',
				tel: '',
				paw1: '',
				paw2: '',

			};
		},
		onLoad(option) {
			uni.$setNavigationBarColor()
			let a = this.userinfo.phone.substr(0, 3)
			let b = this.userinfo.phone.substr(this.userinfo.phone.length - 2, this.userinfo.phone.length)
			let c = '******'
			this.tel = a + c + b
			this.titile = option.titile
			if (this.titile == '淘宝账号') {
				wx.setNavigationBarTitle({
					title: '修改账号名'
				})
			} else if (this.titile == '手机号') {
				wx.setNavigationBarTitle({
					title: '修改手机号'
				})
			} else {
				wx.setNavigationBarTitle({
					title: '修改密码'
				})
			}
		},
		computed: {
			...mapState("login", ["userinfo"]),
			...mapState("login", ["accountNumber"]),
		},
		methods: {
			...mapMutations("setting", ["updataAccount"]),
			...mapMutations("login", ["updatePhone"]),
			...mapMutations("login", ["updatePassword"]),
			//返回
			back() {
				uni.navigateTo({
					url: "/subUserInfo/setting/setting"
				})
			},
			//修改密码
			newpassword() {

				// username   newPassword
				if (this.paw1.trim().length == 0 || this.paw2.trim().length == 0) {
					return uni.$showToast("请输入密码", "error")
				} else if (this.paw1 != this.paw2) {
					return uni.$showToast("密码不相同", "error")
				}

				if (this.userinfo.nickName == '小懒') {
					this.updatePassword({
						username: "admin",
						newPassword: this.paw1
					})
				} else {
					this.updatePassword({
						username: this.userinfo.nickName,
						newPassword: this.paw1
					})
				}
				uni.showLoading({
					title: '修改中……'
				})
				setTimeout(() => {
					uni.$showToast("修改成功")
					uni.hideLoading()
					this.back()
					this.$refs.inputDialog.close()
				}, 1500)
			},
			//修改手机号
			dialogInputConfirm(e) {
				let reg = /^1[3-9]\d{9}$/
				if (!reg.test(e)) {
					return uni.$showToast("手机号不规范！", "error")
				} else if (this.userinfo.phone == e) {
					return uni.$showToast("原手机号相同！", "error")
				}
				this.updatePhone(e)
				uni.showLoading({
					title: '修改中……'
				})
				setTimeout(() => {
					uni.$showToast("修改成功")
					uni.hideLoading()
					this.back()
					this.$refs.inputDialog.close()

				}, 1500)
			},
			//修改账号名和打开修改手机号框
			bnt() {
				if (this.titile == '淘宝账号') {
					if (this.Upper) {
						return uni.$showToast("暂不支持英文大写", "error")
					} else if (this.value.trim().length == 0) {
						return uni.$showToast("账号不能为空", "error")
					}
					this.updataAccount(this.value)
					uni.$showToast("修改账号成功", "error")
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				} else {
					this.$refs.inputDialog.open()
				}


			},
			//是否是英文大写
			change(e) {
				this.Upper = false
				for (let a of e) {
					let strCode = a.charCodeAt()
					if (strCode >= 65 && strCode <= 90) {
						this.Upper = true
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.all {
		width: 90%;
		margin: 0 auto;
		padding-top: 40px;

		.top-box {
			height: 250rpx;
			background-color: white;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: relative;



			.avatar {
				display: block;
				width: 150rpx;
				height: 150rpx;
				border-radius: 90rpx;
				border: 4rpx solid white;
				box-shadow: 0 2rpx 10rpx black;
			}

			.nickname {
				color: #db8650;
				font-weight: bold;
				font-size: 32rpx;
				margin-top: 20rpx;
			}
		}

		.newpwdall {


			.newpwd {
				border: 1px solid red;
				height: 35px;
				display: flex;
				align-items: center;
				background-color: white;
				font-size: 13px;
				margin-bottom: 25px;

				text {
					padding: 0 15px 0 15px;
					font-weight: 800;
				}
			}

			.newpwdtext {
				font-size: 12px;
			}

			.pwdbut {
				margin-top: 30px;
			}
		}

		.button1123 {
			width: 100%;
			margin-top: 20px;
		}

		.settingphone {
			display: flex;
			flex-direction: column;
			align-items: center;

			.button1 {
				width: 100%;
				margin-top: 20px;
			}


			.phone {
				font-size: 12px;
				color: #9d9d9d;
			}

			.text1 {
				margin-top: 10px;
				font-size: 20px;
			}
		}

		.custom-style {
			margin-top: 30px;
			border: 1px solid #fd5d01;
			border-radius: 10px;

		}

		.text {
			margin-top: 20px;
			font-size: 12px;
			color: #9f9d9e;
		}

		.button {
			margin-top: 60px;
		}
	}
</style>